import React from 'react'
// v6版本的使用
import { Routes, Route, Link, Navigate } from "react-router-dom";
import ReactPage from "./video/ReactPage";
import Vue from "./video/Vue";
import Flutter from "./video/Flutter";

const Video = () => {
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactPage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Routes>
                    <Route path="/*" element={<Navigate to={"/video/reactPage"} />} />
                    <Route path="/reactPage/" element={<ReactPage />} />
                    <Route path="/vue/" element={<Vue />} />
                    <Route path="/flutter/" element={<Flutter />} />
                </Routes>
            </div>
        </div>
    )
}

export default Video;